<!doctype html>
<html>
<head><base href="/">
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
#include("/WEB-INF/_system/common/layui_control.html")
</head>
<body><!-- style="background-color: #F2F2F2;" -->
<hr>
<form  class="layui-form layui-form-pane"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <input type="text" name="gTable.id" value="#(gTable.id)"  autocomplete="off" readonly="readonly" class="layui-input layui-hide">
  <div  class="layui-form-item">
    <label class="layui-form-label">表名</label>
    <div class="layui-input-inline">
      <input type="text" name="gTable.tableName" value="#(gTable.tableName)"  autocomplete="off" readonly="readonly" class="layui-input">
    </div>
    <label class="layui-form-label">表描述</label>
    <div class="layui-input-inline">
      <input type="text" name="gTable.tableComment" value="#(gTable.tableComment)" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item ">
    <label class="layui-form-label">主键策略</label>
    <div class="layui-input-inline">
      <select name="gTable.keyStrategy" lay-filter="status" lay-search>
        <option  value="0" #if(gTable.keyStrategy=='0') selected="selected" #end>GID</option>
        <option  value="1" #if(gTable.keyStrategy=='1') selected="selected" #end>UUID</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item ">
    <label class="layui-form-label">表单分类</label>
    <div class="layui-input-inline">
      <select name="gTable.formClass" lay-filter="status" lay-search>
        <option value="0" #if(gTable.formClass=='0') selected="selected" #end>普通表单</option>
        <option value="1" #if(gTable.formClass=='1') selected="selected" #end>复杂表单</option>
        <option value="2" #if(gTable.formClass=='2') selected="selected" #end>VIP表单</option>
      </select>
    </div>
    <label class="layui-form-label">表类型</label>
    <div class="layui-input-inline">
      <select name="gTable.tableType" lay-filter="status" lay-search>
        <option value="0" #if(gTable.tableType=='0') selected="selected" #end>单表</option>
        <option value="1" #if(gTable.tableType=='1') selected="selected" #end>主表</option>
        <option value="2" #if(gTable.tableType=='2') selected="selected" #end>附表</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item ">
    <label class="layui-form-label">PC表单风格</label>
    <div class="layui-input-inline">
      <select name="gTable.pcStyle" lay-filter="status" lay-search>
        <option value="0">默认BootStrap</option>
      </select>
    </div>
    <label class="layui-form-label">移动表单风格</label>
    <div class="layui-input-inline">
      <select name="gTable.mobileStyle" lay-filter="status" lay-search>
        <option value="0">默认BootStrap</option>
      </select>
    </div>
  </div>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">页面属性</li>
    <li>校验字典</li>
    <!-- <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li> -->
  </ul>
    <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
  <table class="layui-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>字段名称</th>
        <th>字段备注</th>
        <th>表单显示</th>
        <th>列表显示</th>
        <th>控件类型</th>
        <th>控件长度</th>
        <th>是否查询</th>
        <th>查询类型</th>
      </tr> 
    </thead>
    <tbody>
#for(x:gTable.gTableColumns)
#set(rows=for.size)
      <tr>
       <input type="text" value="#(x.id)" name="gTableColumn[#(for.index)].id" autocomplete="off" class="layui-input layui-hide" >
        <td>#(for.count)</td>
        <td>
        <input type="text" value="#(x.columnName)" name="gTableColumn[#(for.index)].columnName" autocomplete="off" class="layui-input" readonly="readonly">
        </td>
        <td>
        <input type="text" value="#(x.columnComment)" name="gTableColumn[#(for.index)].columnComment" autocomplete="off" class="layui-input" >
        </td>
        <td>
        <input type="checkbox" value="#(x.id)#(for.index)formShow"  #if(x.formShow=='0') checked #end >
        <input id="#(x.id)#(for.index)formShow" value="#(x.formShow)" type="text"  name="gTableColumn[#(for.index)].formShow" autocomplete="off" class="layui-input layui-hide" >
        </td>
        <td>
        <input  type="checkbox" value="#(x.id)#(for.index)tableShow"  #if(x.tableShow=='0') checked #end   >
        <input id="#(x.id)#(for.index)tableShow" value="#(x.tableShow)" type="text"  name="gTableColumn[#(for.index)].tableShow" autocomplete="off" class="layui-input layui-hide" >
        </td>
        <td>
        <select name="gTableColumn[#(for.index)].controlType" lay-filter="status" lay-search>
        <option value="input" #if(x.controlType=='input') selected #end>文本框</option>
        <option value="password" #if(x.controlType=='password') selected #end>密码</option>
        <option value="select" #if(x.controlType=='select') selected #end>下拉选</option>
        <option value="checkbox_default" #if(x.controlType=='checkbox_default') selected #end>默认风格复选框</option>
        <option value="checkbox_primary" #if(x.controlType=='checkbox_primary') selected #end>原始风格复选框</option>
        <option value="checkbox_switch" #if(x.controlType=='checkbox_switch') selected #end>开关</option>
        <option value="radio" #if(x.controlType=='radio') selected #end>单选框</option>
        <option value="textarea" #if(x.controlType=='textarea') selected #end>文本域</option>
        <option value="laytime" #if(x.controlType=='laytime') selected #end>laydate时间(YYYY-MM-DD hh:mm:ss)</option>
        <option value="laydate" #if(x.controlType=='laydate') selected #end>laydate日期(YYYY-MM-DD)</option>
        <option value="laydate_limit" #if(x.controlType=='laydate_limit') selected #end>laydate日期limit(YYYY-MM-DD)</option>
        <option value="laytime_limit" #if(x.controlType=='laytime_limit') selected #end>laytime时间limit(YYYY-MM-DD)</option>
        <option value="layedit" #if(x.controlType=='layedit') selected #end>layedit编辑器</option>
        <option value="umeditor" #if(x.controlType=='umeditor') selected #end>umeditor编辑器</option>
        <option value="layupload" #if(x.controlType=='layupload') selected #end>图片上传(ajax单张)</option>
        <option value="layuploads" #if(x.controlType=='layuploads') selected #end>图片上传(ajax多张)</option>
        <option value="layuploadv" #if(x.controlType=='layuploadv') selected #end>视频上传</option>
        <option value="layuploadvs" #if(x.controlType=='layuploadvs') selected #end>视频上传(ajax多视频)</option>
        <option value="layuploadm" #if(x.controlType=='layuploadm') selected #end>音频上传</option>
        <option value="layuploadms" #if(x.controlType=='layuploadms') selected #end>音频上传(ajax多音频)</option>
        <option value="layuploadf" #if(x.controlType=='layuploadf') selected #end>文件上传</option>
        <option value="layuploadfs" #if(x.controlType=='layuploadfs') selected #end>文件上传(ajax多文件)</option>
        </select>
        </td>
        <td>
        <input type="text" name="gTableColumn[#(for.index)].controlLength" value="#(x.controlLength)" autocomplete="off" class="layui-input">
        </td>
        <td>
        <input type="checkbox" value="#(x.id)#(for.index)isQuery" #if(x.isQuery=='0') checked #end   >
        <input id="#(x.id)#(for.index)isQuery" value="#(x.isQuery)" type="text"  name="gTableColumn[#(for.index)].isQuery" autocomplete="off" class="layui-input layui-hide" >
        </td>
        <td>
        <select name="gTableColumn[#(for.index)].queryType" lay-filter="status" lay-search>
        <option value="0">普通查询</option>
        <option value="1">LIKE查询</option>
        <option value="2">范围查询</option>
        </select>
        </td>
      </tr>
#end
    </tbody>
  </table>
  </div>
    <div class="layui-tab-item">
    <table class="layui-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>字段名称</th>
        <th>字段备注</th>
        <th>字段Href</th>
        <th>验证规则</th>
        <!-- <th>校验必填</th> -->
        <th>字典Table</th>
        <th>字典Code</th>
        <th>字典Text</th>
        <th>字典扩展</th>
      </tr> 
    </thead>
    <tbody>
#for(x:gTable.gTableColumns)
      <tr>
        <td>#(for.count)</td>
        <td>
        <input type="text" value="#(x.columnName)"  autocomplete="off" class="layui-input" disabled="disabled" >
        </td>
        <td>
        <input type="text" value="#(x.columnComment)"  autocomplete="off" class="layui-input" disabled="disabled" >
        </td>
        <td>
        <input type="text" value="#(x.columnHref)" name="gTableColumn[#(for.index)].columnHref" autocomplete="off" class="layui-input">
        </td>
        <td>
        <select name="gTableColumn[#(for.index)].validationRules" lay-filter="status" lay-search>
        <option value="|"></option>
        <option value="required">非空</option>
        <option value="number">数字</option>
        <option value="phone">手机号</option>
        <option value="email">邮箱</option>
        <option value="url">网址</option>
        <option value="date">日期</option>
        <option value="identity">身份证</option>
        </select>
        </td>
        <!-- <td>
        <input type="checkbox" value="#(x.id)#(for.index)validationRequired" #if(controlType=='radio'||controlType=='checkbox_switch'||controlType=='checkbox_primary'||controlType=='checkbox_default'||controlType=='select') lay-verify="required" #end  >
        <input id="#(x.id)#(for.index)validationRequired" value="#(x.validationRequired)" type="text"  name="gTableColumn[#(for.index)].validationRequired" autocomplete="off" class="layui-input layui-hide" >
        </td> -->
        <td>
        <input type="text" value="#(x.dTable)" name="gTableColumn[#(for.index)].dTable" #if(x.validationRequired=='0') checked #end autocomplete="off" class="layui-input">
        </td>
        <td>
        <input type="text" value="#(x.dCode)" name="gTableColumn[#(for.index)].dCode" autocomplete="off" class="layui-input">
        </td>
        <td>
        <input type="text" value="#(x.dText)" name="gTableColumn[#(for.index)].dText" autocomplete="off" class="layui-input">
        </td>
        <td>
        <input type="text" value="#(x.dExtend)" name="gTableColumn[#(for.index)].dExtend" autocomplete="off" class="layui-input">
        </td>
      </tr>
#end
    </tbody>
  </table>
   </div>
<!--<div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div> -->
</div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="/js/layui/layui.js"></script>
<script>
$(function(){
layui.use(['form','layer','element'], function(){
	var form = layui.form();
	var layer = layui.layer;
	var element = layui.element();
    form.render(); //更新全部
    form.on('checkbox', function(data){
    	  console.log(data.elem); //得到checkbox原始DOM对象
    	  console.log(data.elem.checked); //是否被选中，true或者false
    	  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
    	  console.log(data.othis); //得到美化后的DOM对象
    	  if(data.elem.checked){
    		  $("#"+data.value).val("0");
    	  }else{
    		  $("#"+data.value).val("1");
    	  }
    	  
    	});        
  //各种基于事件的操作，下面会有进一步介绍
  form.on('submit(*)', function(data){
	  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
	  $.ajax({
          url:'/g/doedit/#(rows)',
          type:'POST', //GET
          data:data.field,
          timeout:5000,    //超时时间
          dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
          success:function(data,textStatus,jqXHR){
          parent.list(parent.$("#search").data("pageNumber"));
          var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
          parent.layer.close(index);//关闭弹出的子页面窗口 */
          parent.layer.msg(data.msg, {icon: 1}); 
          },
          eorror:function(){
          layer.msg('网络发生错误，请联系管理员！', {icon: 2});
          }
      });
	  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
 });
});
</script></body></html>